<template>
	<view class="container" v-if="detail">
		<view class="title">{{ detail.projectName }}</view>
		<view class="meta">上报人：{{ detail.reporterName }} · {{ detail.createdAt }}</view>
		<view class="status">状态：{{ statusText(detail.status) }}</view>
		<view v-if="detail.address" class="section">
			<view class="label">地址</view>
			<view class="address-info">
				<view class="address-main">{{ detail.address }}</view>
				<view v-if="detail.locationDetail" class="address-detail">{{ detail.locationDetail }}</view>
				<view v-if="detail.latitude && detail.longitude" class="location-coords">
					<text class="coord-text">坐标：{{ detail.latitude }}, {{ detail.longitude }}</text>
					<text class="map-btn" @tap="openMap">查看地图</text>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="label">问题描述</view>
			<view class="desc">{{ detail.description }}</view>
		</view>
		<view class="section">
			<view class="label">图片</view>
			<view class="images">
				<image v-for="(url, idx) in detail.images" :key="idx" :src="url" class="img" mode="aspectFill" @tap="preview(idx)" />
			</view>
		</view>
	</view>
	<view v-else class="empty">加载中...</view>
</template>

<script>
import { apiGetReportDetail } from '@/services/api.js'

export default {
	data() {
		return {
			id: null,
			detail: null
		}
	},
	onLoad(query) {
		this.id = query?.id;
		this.fetch();
	},
	methods: {
		async fetch() {
			if (!this.id) return;
			try {
				const res = await apiGetReportDetail(this.id);
				// 期望：{ id, projectName, reporterName, createdAt, status, description, images: [] }
				this.detail = res?.data || res;
			} catch (e) {
				uni.showToast({ title: '加载失败', icon: 'none' });
			}
		},
		statusText(s) {
			if (s === 'pending') return '待处理';
			if (s === 'processing') return '处理中';
			if (s === 'resolved') return '已完成';
			return s || '';
		},
		preview(idx) {
			uni.previewImage({ urls: this.detail.images, current: this.detail.images[idx] });
		},
		openMap() {
			if (this.detail.latitude && this.detail.longitude) {
				uni.openLocation({
					latitude: parseFloat(this.detail.latitude),
					longitude: parseFloat(this.detail.longitude),
					name: this.detail.address || '上报位置',
					address: this.detail.locationDetail || this.detail.address || '',
					success: () => {},
					fail: (err) => {
						uni.showToast({ title: '打开地图失败', icon: 'none' });
					}
				});
			}
		}
	}
}
</script>

<style>
.container { padding: 24rpx; }
.empty { color: #888; text-align: center; padding: 80rpx 0; }
.title { font-size: 36rpx; font-weight: 600; margin-bottom: 6rpx; }
.meta { color: #888; font-size: 24rpx; margin-bottom: 12rpx; }
.status { color: #333; margin-bottom: 20rpx; }
.section { margin-bottom: 20rpx; }
.label { font-size: 28rpx; margin-bottom: 8rpx; color: #666; }
.address-info { background: #fff; padding: 16rpx; border-radius: 12rpx; border: 1rpx solid #eee; }
.address-main { font-size: 28rpx; color: #333; margin-bottom: 8rpx; font-weight: 500; }
.address-detail { font-size: 24rpx; color: #666; margin-bottom: 12rpx; line-height: 1.6; }
.location-coords { display: flex; justify-content: space-between; align-items: center; padding-top: 12rpx; border-top: 1rpx solid #f0f0f0; }
.coord-text { font-size: 22rpx; color: #999; }
.map-btn { font-size: 24rpx; color: #007AFF; padding: 4rpx 12rpx; border: 1rpx solid #007AFF; border-radius: 4rpx; }
.desc { white-space: pre-wrap; background: #fff; padding: 16rpx; border-radius: 12rpx; border: 1rpx solid #eee; }
.images { display: flex; flex-wrap: wrap; gap: 12rpx; }
.img { width: 220rpx; height: 220rpx; border-radius: 12rpx; background: #f5f5f5; }
</style>


